<style include="diagnostics-shared">
  :host-context(body.jelly-enabled) .device #deviceIcon {
    --iron-icon-fill-color: var(--cros-icon-color-prominent);
    background-color: var(--cros-sys-highlight_shape);
  }

  paper-tooltip {
    --paper-tooltip-background: var(--cros-tooltip-background-color);
    --paper-tooltip-min-width: 0px;
    --paper-tooltip-text-color: var(--cros-tooltip-label-color);
  }

  .device {
    display: flex;
    padding: 12px 20px;
  }

  .device #deviceIcon {
    --iron-icon-fill-color: var(--cros-color-prominent);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    background-color: var(--cros-highlight-color);
    border-radius: 50%;
    margin-inline-end: 28px;
    padding: 8px;
  }

  .device #infoIcon {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
    --iron-icon-height: 20px;
    --iron-icon-width: 20px;
    align-self: center;
    margin-inline-end: 12px;
  }

  .device #tooltipText {
    font-family: var(--diagnostics-roboto-font-family);
    font-weight: var(--diagnostics-regular-font-weight);
  }

  .device #inputDeviceTestButton {
      align-self: center;
  }

  .device-body {
    align-self: center;
    flex-grow: 1;
    line-height: 140%;
  }

  .device-name {
    color: var(--cros-text-color-secondary);
  }

  .device-description {
    color: var(--cros-text-color-primary);
  }
</style>
<diagnostics-card-frame>
  <slot name="title" slot="title"></slot>
  <div slot="contents">
    <dom-repeat items="[[devices]]" as="device">
      <template>
        <div class="device" data-evdev-id$="[[device.id]]">
          <iron-icon icon="[[deviceIcon]]" id="deviceIcon"></iron-icon>
          <div class="device-body">
            <div class="device-description" id="deviceDescription">
              [[getDeviceDescription(device)]]
            </div>
            <div class="device-name" id="deviceName">[[device.name]]</div>
          </div>
          <iron-icon slot="icon" icon="diagnostics:info" id="infoIcon" tabindex="0"
              aria-labelledby="tooltipText" role="img"
              hidden$="[[getDeviceTestability(device, hostDeviceStatus)]]">
          </iron-icon>
          <paper-tooltip for="infoIcon" aria-hidden="true">
            <span id="tooltipText">
              [[getDeviceTestabilityErrorMessage(device, hostDeviceStatus)]]
            </span>
          </paper-tooltip>
          <cr-button id="inputDeviceTestButton"
              on-click="handleTestButtonClick"
              aria-labelledby="inputDeviceTestButton deviceDescription"
              disabled="[[!getDeviceTestability(device, hostDeviceStatus)]]">
            [[i18n('inputDeviceTest')]]
          </cr-button>
        </div>
      </template>
    </dom-repeat>
  </div>
</diagnostics-card-frame>
